<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link active">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Sidebars</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Sidebars</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Sidebars overview -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="overview">Sidebars overview</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-3">
										Sidebar - vertical area that displays onscreen and presents widget components and website navigation menu in a text-based hierarchical form. All sidebars are css-driven - just add one of css classes to the <code>body</code> tag and/or <code>.sidebar</code> container, and sidebar will change its width and color. No js, css only. Although sidebar type is based on css, buttons do their job with jQuery - they switch proper classes in <code>&lt;body></code> tag. Below you'll find summarized tables with all available <code>button</code> and sidebar container classes. By default the template includes 6 different sidebar types and combinations:
									</div>

									<p>Table below describes all sidebar types and combinations available:</p>
									<div class="table-responsive">
										<table class="table table-bordered table-striped">
											<thead>
												<tr>
													<th style="width: 250px;">Type</th>
													<th>Description</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td class="font-weight-semibold">Default sidebar</td>
													<td>Default template sidebar has <code>270px</code> width, aligned to the left (to the right in RTL version) and has dark blue background color. All navigation levels are based on accordion <strong>or</strong> collapsible functionality, open on click. Supports 2 versions: <strong>static</strong> and <strong>fixed</strong>. Fixed version can be used with native or custom scrollbars.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Mini sidebar</td>
													<td>Mini sidebar has <code>56px</code> width in REM units, no text in parent level of menu items, aligned to the left (to the right in RTL version) and has dark blue background color. Second navigation level opens on parent level hover, absolute positioned, other children levels are based on accordion or collapsible functionality, open on click. It is <strong>required</strong> to add <code>.sidebar-xs</code> class to the <code>&lt;body></code> tag. This class is responsible for sidebar width and main navigation. By default all components except main navigation are hidden in mini sidebar. Mini sidebar can be used in <strong>main</strong> sidebar only.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Secondary sidebar</td>
													<td>Main sidebar has <code>270px</code> width or <code>56px</code> (if <code>.sidebar-xs</code> class added). Secondary sidebar has fixed width of <code>270px</code>, which is identical to default and default sidebars, so different sidebar components can be placed to all available sidebars. Main and secondary sidebars can contain any content - menu, navigation, buttons, lists, tabs etc. Secondary sidebar is not collapsible, but can be toggled.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Right sidebar</td>
													<td>Right sidebar includes additional sidebar displayed on the right side of the main sidebar. It has a static position, appears as an additional component with 100% height and pushes content left/right. There are 2 different ways of displaying alternative sidebar: first - when it collapses main sidebar from default to mini width and second - when it hides the main sidebar. For these actions are responsible 2 different buttons - <code>.sidebar-right-toggle</code> and <code>.sidebar-right-main-toggle</code>.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Right and secondary sidebars</td>
													<td>Secondary and Right sidebars can be used together, so basically it is a 4 column layout. When right sidebar is shown, additional options are available: hide main sidebar, hide secondary sidebar, collapse main sidebar width. Since right sidebar is hidden by default, by manipulating classes you can display all 4 sidebars at once. Options are accessible via proper button and/or body classes.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Content sidebar</td>
													<td>Sidebar usually is not a part of content and mainly used for navigation. Limitless allows you to use sidebar outside and inside content area. Content sidebar isn't based on grid and has the same width as other sidebars, this means all sidebar components can be placed inside content sidebar as well. Supports left and right positioning.</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<!-- /sidebars overview -->


							<!-- Sidebar markup -->
							<div class="card">
								<div class="card-header header-elements-inline">
									<h5 class="card-title" id="markup">Sidebar markup</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<p>Sidebar markup is the same in layout variations. First and second layouts use the same markup for main and content sidebars, while other layouts don't have optional content sidebars as main sidebars are detached by default. All sidebars support cards and all card components, including card header/footer elements. All cards can be collapsed, removed and support sorting functionality.</p>

										<p>Main sidebar is different. Although its markup is similar to other sidebars, functionality is different - only main sidebar can be collapsed using <code>.sidebar-xs</code> class added to <code>&lt;body></code> tag. In collapsed sidebar only user info block and navigation is visible and adapted to smaller width. If you need to include other components to the main sidebar, don't use <code>.card-sidebar-mobile</code> class in card body container, because this class keeps card visible in collapsed sidebar.</p>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold" id="markup_main">Main sidebar markup</h6>
										<p>Main sidebar includes block with user information and main navigation:</p>
										<pre class="language-markup" data-line="2"><code>&lt;!-- Main sidebar -->
&lt;div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

	&lt;!-- Sidebar mobile toggler -->
	&lt;div class="sidebar-mobile-toggler text-center">
		&lt;a href="#" class="sidebar-mobile-main-toggle">
			&lt;i class="icon-arrow-left8">&lt;/i>
		&lt;/a>

		&lt;span class="font-weight-semibold">Main sidebar&lt;/span>

		&lt;a href="#" class="sidebar-mobile-expand">
			&lt;i class="icon-screen-full">&lt;/i>
			&lt;i class="icon-screen-normal">&lt;/i>
		&lt;/a>
	&lt;/div>
	&lt;!-- /sidebar mobile toggler -->


	&lt;!-- Sidebar content -->
	&lt;div class="sidebar-content">

		&lt;!-- User menu -->
		&lt;div class="sidebar-user">
			...
		&lt;/div>
		&lt;!-- /user menu -->


		&lt;!-- Main navigation -->
		&lt;div class="card card-sidebar-mobile">
			...
		&lt;/div>
		&lt;!-- /main navigation -->

	&lt;/div>
	&lt;!-- /sidebar content -->
	
&lt;/div>
&lt;!-- /main sidebar -->
</code></pre>

									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold" id="markup_secondary">Secondary sidebar markup</h6>
										<p>Usually secondary sidebar is light and comes after main sidebar and may include alternative navigation and sidebar components:</p>
										<pre data-line="2" class="language-markup" data-line="2"><code>&lt;!-- Secondary sidebar -->
&lt;div class="sidebar sidebar-light sidebar-secondary sidebar-expand-md">

	&lt;!-- Sidebar mobile toggler -->
	&lt;div class="sidebar-mobile-toggler text-center">
		&lt;a href="#" class="sidebar-mobile-secondary-toggle">
			&lt;i class="icon-arrow-left8">&lt;/i>
		&lt;/a>

		&lt;span class="font-weight-semibold">Secondary sidebar&lt;/span>

		&lt;a href="#" class="sidebar-mobile-expand">
			&lt;i class="icon-screen-full">&lt;/i>
			&lt;i class="icon-screen-normal">&lt;/i>
		&lt;/a>
	&lt;/div>
	&lt;!-- /sidebar mobile toggler -->


	&lt;!-- Sidebar content -->
	&lt;div class="sidebar-content">
		...
	&lt;/div>
	&lt;!-- /sidebar content -->

&lt;/div>
&lt;!-- /secondary sidebar -->
</code></pre>

									</div>


									<div class="mb-4">
										<h6 class="font-weight-semibold" id="markup_right">Right sidebar markup</h6>
										<p>Right sidebar appears on the right side from content area. Supports all available sidebar components, can be either dark or white and supports alternative navigation:</p>
										<pre data-line="2" class="language-markup" data-line="2"><code>&lt;!-- Right sidebar -->
&lt;div class="sidebar sidebar-light sidebar-right sidebar-expand-md">

	&lt;!-- Sidebar mobile toggler -->
	&lt;div class="sidebar-mobile-toggler text-center">
		&lt;a href="#" class="sidebar-mobile-expand">
			&lt;i class="icon-screen-full">&lt;/i>
			&lt;i class="icon-screen-normal">&lt;/i>
		&lt;/a>

		&lt;span class="font-weight-semibold">Right sidebar&lt;/span>

		&lt;a href="#" class="sidebar-mobile-right-toggle">
			&lt;i class="icon-arrow-right8">&lt;/i>
		&lt;/a>
	&lt;/div>
	&lt;!-- /sidebar mobile toggler -->


	&lt;!-- Sidebar content -->
	&lt;div class="sidebar-content">
		...
	&lt;/div>
	&lt;!-- /sidebar content -->

&lt;/div>
&lt;!-- /right sidebar -->
</code></pre>

									</div>


									<div>
										<h6 class="font-weight-semibold" id="markup_content">Content sidebar markup</h6>
										<p>Detached sidebar is available in first and second layouts only. Detached sidebar has a bit different markup and supports both left and right positions:</p>
										<pre data-line="5, 8, 21" class="language-markup" data-line="2"><code>&lt;!-- Content area -->
&lt;div class="content">

	&lt;!-- Inner container -->
	&lt;div class="d-md-flex align-items-md-start">

		&lt;!-- Left sidebar component -->
		&lt;div class="sidebar sidebar-light sidebar-component sidebar-component-left sidebar-expand-md">

			&lt;!-- Sidebar content -->
			&lt;div class="sidebar-content">
				...
			&lt;/div>
			&lt;!-- /sidebar content -->

		&lt;/div>
		&lt;!-- /left sidebar component -->


		&lt;!-- Right content -->
		&lt;div class="w-100">
			...
		&lt;/div>
		&lt;!-- /right content -->

	&lt;/div>
	&lt;!-- /inner container -->

&lt;/div>
&lt;!-- /content area -->
</code></pre>

									</div>
								</div>
							</div>
							<!-- /sidebar markup -->


							<!-- Sidebar classes -->
							<div class="card" id="classes_sidebars">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Sidebar classes</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									<h6 class="font-weight-semibold">Overview</h6>
									<p class="mb-3">This table demonstrates all classes for <code>sidebar</code> container, responsible for the sidebar width and color. Almost all of these classes are mandatory, some of them are responsible for proper styling or have a specific code attached to this class (like <code>.sidebar-main</code> class, which has collapsible functionality). All classes can be combined depending on the type of sidebar:</p>
									<div class="table-responsive mb-4">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th style="width: 300px">Body class</th>
													<th>Description</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><code>.sidebar</code></td>
													<td>Default sidebar class, should be added in all layout types.</td>
												</tr>
												<tr>
													<td><code>.sidebar-main</code></td>
													<td>Defines <strong>main</strong> sidebar. Mini sidebar (<code>.sidebar-xs</code> class) takes effect only if sidebar has <code>.sidebar-main</code> class. By default, all components except main navigation are hidden in mini sidebar.</td>
												</tr>
												<tr>
													<td><code>.sidebar-secondary</code></td>
													<td>Defines <strong>secondary</strong> sidebar. Has fixed <code>270px</code> width and usually comes after main sidebar.</td>
												</tr>
												<tr>
													<td><code>.sidebar-right</code></td>
													<td>Defines <strong>right</strong> sidebar. Has fixed <code>270px</code> width and appears on the right side from the main sidebar.</td>
												</tr>
												<tr>
													<td><code>.sidebar-light</code></td>
													<td>Defines <strong>light</strong> sidebar. This class can be applied to all sidebar types and positions.</td>
												</tr>
												<tr>
													<td><code>.sidebar-dark</code></td>
													<td>Defines <strong>dark</strong> sidebar. This class can be applied to all sidebar types and positions. This class is also required for custom colors (see below).</td>
												</tr>
												<tr>
													<td><code>.sidebar-dark.bg-*</code></td>
													<td>Defines sidebar background color. According to the custom color system, sidebar background color can be changed to one of the available colors by adding a proper class to the main sidebar container.</td>
												</tr>
												<tr>
													<td><code>.sidebar-component</code></td>
													<td>This class is required in <strong>content</strong> (or component) sidebar. Also requires <code>.sidebar-component-left</code> or <code>.sidebar-component-right</code> classes for proper spacing.</td>
												</tr>
												<tr>
													<td><code>.sidebar-expand-[breakpoint]</code></td>
													<td>This class specifies when sidebar needs to be collapsed, basically when sidebar switches to mobile mode. Breakpoint should always be similar to <strong>navbar</strong> breakpoint for proper matching. Available breakpoints are: xl, lg, md and sm. This class is required.</td>
												</tr>
											</tbody>
										</table>
									</div>

									<h6 class="font-weight-semibold">Example Markup</h6>
									<div class="row">
										<div class="col-md-6">
											<p>Default left aligned sidebar markup:</p>
											<pre class="language-markup mb-3" data-line="2"><code>&lt;!-- Default sidebar layout -->
&lt;body>

	&lt;!-- Navbar -->
	&lt;div class="navbar navbar-dark navbar-expand-md">
		...
	&lt;/div>
	&lt;!-- /navbar -->


	&lt;!-- Page container -->
	&lt;div class="page-content">

		&lt;!-- Main sidebar -->
		&lt;div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
			&lt;div class="sidebar-content">
				...
			&lt;/div>
		&lt;/div>
		&lt;!-- /main sidebar -->

		&lt;!-- Main content -->
		&lt;div class="content-wrapper">
			...
		&lt;/div>
		&lt;!-- /main content -->

	&lt;/div>
	&lt;!-- /page content -->

&lt;/body>
&lt;!-- /default sidebar layout -->
	</code></pre>

										</div>

										<div class="col-md-6">
											<p>Mini sidebar markup. The only difference is <code>&lt;body></code> class:</p>
											<pre class="language-markup mb-3" data-line="2"><code>&lt;!-- Mini sidebar layout -->
&lt;body class="sidebar-xs">

	&lt;!-- Navbar -->
	&lt;div class="navbar navbar-dark navbar-expand-md">
		...
	&lt;/div>
	&lt;!-- /navbar -->


	&lt;!-- Page container -->
	&lt;div class="page-content">

		&lt;!-- Main sidebar -->
		&lt;div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
			&lt;div class="sidebar-content">
				...
			&lt;/div>
		&lt;/div>
		&lt;!-- /main sidebar -->

		&lt;!-- Main content -->
		&lt;div class="content-wrapper">
			...
		&lt;/div>
		&lt;!-- /main content -->

	&lt;/div>
	&lt;!-- /page content -->

&lt;/body>
&lt;!-- /mini sidebar layout -->
	</code></pre>
										</div>
									</div>
								</div>
							</div>
							<!-- /sidebar classes -->


							<!-- Button classes -->
							<div class="card" id="classes_buttons">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Button classes</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									<h6 class="font-weight-semibold">Overview</h6>
									<p class="mb-3">This table displays all optional <code>button</code> classes, responsible for the sidebar appearance. Depending on the sidebar type, add one of these classes to any button or link and this element will handle sidebar control. Multiple controls are also available - add as many sidebar controls as you wish. Please note: these classes don't change sidebar markup, only CSS rules.</p>
									<div class="table-responsive mb-4">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th style="width: 300px;">Button class</th>
													<th>Action</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><code>.sidebar-main-toggle</code></td>
													<td>Collapsible sidebar. Changes main sidebar width from default to mini. This button is added to all pages by default.</td>
												</tr>
												<tr>
													<td><code>.sidebar-main-hide</code></td>
													<td>Hides and shows <code>main</code> sidebar. Used mostly in dual sidebar type to hide main sidebar. In other layouts this button does the same job as <code>.sidebar-hide-all</code> button.</td>
												</tr>
												<tr>
													<td><code>.sidebar-right-toggle</code></td>
													<td>Toggles right sidebar - if right sidebar is shown, main sidebar width remains the same, whether it's in default or mini mode.</td>
												</tr>
												<tr>
													<td><code>.sidebar-right-main-toggle</code></td>
													<td>Toggles right sidebar - if right sidebar is shown, main sidebar changes its width from default to mini and vice versa. Works with all sidebar layouts - main and main/secondary.</td>
												</tr>
												<tr>
													<td><code>.sidebar-right-main-hide</code></td>
													<td>Hides and shows <code>main</code> sidebar in layout with right sidebar. If right sidebar is shown, main sidebar is hidden despite current width.</td>
												</tr>
												<tr>
													<td><code>.sidebar-secondary-toggle</code></td>
													<td>Hides/shows <code>secondary</code> sidebar. Secondary sidebar supports only toggle functionality and always has fixed width of <code>270px</code>.</td>
												</tr>
												<tr>
													<td><code>.sidebar-right-secondary-hide</code></td>
													<td>Hides/shows <code>secondary</code> sidebar - if right sidebar is shown, secondary sidebar is hidden. This works only in the layout with right sidebar.</td>
												</tr>
												<tr>
													<td><code>.sidebar-component-toggle</code></td>
													<td>Hides/shows <code>content</code> sidebars. Content sidebars aren't connected with other sidebars, so this is the only button that controls their visibility.</td>
												</tr>
												<tr class="table-border-solid">
													<td><code>.sidebar-mobile-main-toggle</code></td>
													<td>Toggles <code>main</code> sidebar on mobile - slides from left to right.</td>
												</tr>
												<tr>
													<td><code>.sidebar-mobile-secondary-toggle</code></td>
													<td>Toggles <code>secondary</code> sidebar on mobile - slides from left to right.</td>
												</tr>
												<tr>
													<td><code>.sidebar-mobile-right-toggle</code></td>
													<td>Toggles <code>right</code> sidebar on mobile - slides from right to left.</td>
												</tr>
												<tr>
													<td><code>.sidebar-mobile-component-toggle</code></td>
													<td>Toggles <code>content</code> sidebar on mobile - has full width by default, has no animation.</td>
												</tr>
												<tr>
													<td><code>.sidebar-mobile-expand</code></td>
													<td>Expands sidebar to full width. Works only with main, secondary and right sidebars.</td>
												</tr>
											</tbody>
										</table>
									</div>

									<h6 class="font-weight-semibold">Example Markup</h6>
									<div class="row">
										<div class="col-md-6">
											<p>Default placement of sidebar control buttons is top navbar:</p>
											<pre class="language-markup mb-3" data-line="7-9"><code>&lt;!-- Navbar placement -->
&lt;div class="navbar navbar-expand navbar-dark">
	&lt;div class="navbar-brand">...&lt;/div>

	&lt;ul class="navbar-nav">
		&lt;li class="nav-item">
			&lt;a href="#" class="navbar-nav-link sidebar-control sidebar-main-toggle">
				&lt;i class="icon-menu">&lt;/i>
			&lt;/a>
		&lt;/li>
		...
	&lt;/ul>
&lt;/div>
&lt;!-- /navbar placement -->
	</code></pre>
										</div>

										<div class="col-md-6">
											<p>Here is an example of button inside card header:</p>
											<pre class="language-markup mb-3" data-line="6-9"><code>&lt;!-- Card header placement -->
&lt;div class="card">
	&lt;div class="card-header header-element-inline">
		&lt;h5 class="card-title">Card title&lt;/h5>
		&lt;div class="header-elements">
			&lt;button type="button" class="sidebar-main-toggle">
				&lt;i class="icon-menu">&lt;/i>
				Collapse sidebar
			&lt;/button>
		&lt;/div>
	&lt;/div>
	&lt;div class="card-body">...&lt;/div>
&lt;/div>
&lt;!-- /card header placement -->
	</code></pre>
										</div>
									</div>


								</div>
							</div>
							<!-- /button classes -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item"><a href="#overview" class="nav-link">Sidebars overview</a></li>
										<li class="nav-item nav-item-submenu">
											<a href="#markup" class="nav-link">Markup</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#markup_main" class="nav-link">Main sidebar</a></li>
												<li class="nav-item"><a href="#markup_secondary" class="nav-link">Secondary sidebar</a></li>
												<li class="nav-item"><a href="#markup_right" class="nav-link">Right sidebar</a></li>
												<li class="nav-item"><a href="#markup_content" class="nav-link">Content sidebar</a></li>
											</ul>
										</li>
										<li class="nav-item"><a href="#classes_sidebars" class="nav-link">Sidebar classes</a></li>
										<li class="nav-item"><a href="#classes_buttons" class="nav-link">Button classes</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
